<% unique_id = rand(1000) %>

  <style>
  	#map<%= unique_id %> { width:100%; height:500px; margin: 0; position: relative;}
  </style>

<div>
   <div class="leaflet-map inline-map" id="map<%= unique_id %>"></div>
 </div>
 
  <p><i><small>
    <% if !@map_lat.nil? && !@map_lon.nil? %>
      Current view based on your shared location. Click <a href='/profile'>here</a> to adjust.
    <% else %>
      Share your own location on <a href='/profile'>your profile</a>.
      Learn about <a href='https://publiclab.org/wiki/location-privacy'>privacy</a>
    <% end %>
  </small></i></p>


  <script>

    // First check controller for calculated location - for /people page
    // Next check for local variables - for inline maps
    var lat = <%= @map_lat %>+"" || <%= lat ||= 48 %>;
    var lon = <%= @map_lon %>+"" || <%= lon ||= 0 %>;
    var zoom = <%= @map_zoom %>+"" || <%= zoom ||= 3 %>; // to do: calculate proper zoom for given lat/lon precision

    const bounds<%= unique_id %> = new L.LatLngBounds(
      new L.LatLng(84.67351257, -172.96875),
      new L.LatLng(-54.36775852, 178.59375)
    );

    var map<%= unique_id %> = L.map("map<%= unique_id %>", {
      maxBounds: bounds<%= unique_id %>,
      maxBoundsViscosity: 0.75
    }).setView([lat, lon], zoom);

    map<%= unique_id %>.options.minZoom = 2 ;

    var markers_hash<%= unique_id %> = new Map() ;

    var setHash = 1;
    <% if defined? url_hash != nil and url_hash == 0 %>
      setHash = 0;
    <% end %>

    var options<%= unique_id %> = {
      layers: ["PLpeople"]
    }
    setupLEL(map<%= unique_id %>, markers_hash<%= unique_id %>, options<%= unique_id %>);
    

  </script>
